<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
	
		div,img{
			padding:0;
			margin:0;
			color:#777;
		}
		a{text-decoration:none;color:#777;}
		.outer{
			height:350px;
			width:350px;
			position:relative;
			float:left;
			
		}
		.outer img{
			height:100%;
			width:100%;	
			float:left;
			position:absolute;
			top:0;
			left:0;		
		}
		.smallimg{

			height:50%;
			width:50%;
			background:yellow;
			filter:alpha(opacity=50);
			opacity:0.5;
			border:1px solid #ddd;
			float:left;
			position: absolute;
			top:0;
			left:0;

		}
		.bigimg{
			position:absolute;
			left:400px;
			top:0;
			height:350px;
			width:350px;
			float:left;
			
			overflow: hidden;
			
		}
		.bigimg img{
			height:700px;
			width:700px;
		}
		.show{
			display:block;
		}
		.hide{
			display:none;
		}
		.divwrap{
			width:350px;
			height:50px;
			position:absolute;
			left:0;
			top:350px;
			margin-top:20px;
			
		}
		
		
		.div2 img{
			float:left;
			margin:0 5px;
			border:1px solid #fff;
		}
		.div2 img:hover{
			border:1px solid red;
		}
		
	#box{padding-left:200px;width:975px;height:auto;font-size:12px;}
	#comments{width:885px;height:130px;padding:20px 60px 0 30px;border-bottom: 1px solid #eee;}
	.left{width:170px;height:130px;float:left}
	.left p{height:17px;line-height:17px;}
	.center{float:left;height:130px;width:560px;}
	.center p{height:18px;}
	.center2{padding-top: 10px;display:none;}
	.right{float:right;}
	.right img,.name .name {float:left;}
	.name{padding-left: 6px;height:25px;line-height: 25px;}
	.right1{margin:5px 0 8px;}
	.right1span1{color:#088000;padding-right: 6px;}
	.list{margin-top:10px;text-align:center;height:50px;}
	.list a{color:#222;font-size:20px;}
	</style>
	
</head>
<body>
	<div class="out">
	<div class='outer'>
		<div class='bgimg'>
			<img src="img/show1.jpg" alt="">
		</div>
		<div class='smallimg hide'></div>
	</div>
	<div class='bigimg hide'>
		<img src="img/show01.jpg" alt="">
	</div>
	<div class='divwrap'>
		
			<div class='div2'>
				<img src="img/small1.jpg" alt="">
				<img src="img/small2.jpg" alt="">
				<img src="img/small3.jpg" alt="">
				<img src="img/small4.jpg" alt="">
				<img src="img/small5.jpg" alt="">
			
			</div>
		
	</div>
<img src="img/banner01.jpg"/>
	</div>
	

	<div class="list">
	<a class="list1" href="javascript:;">上一页</a>
	<a class="list2" href="javascript:;">下一页</a>
	</div>
	<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>


<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>

<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>

<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>

<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>


<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>


<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>


<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>


<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>


<div id="box">
	
	<div id="comments">
			<div class="left">
				<div class="leftImg"><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/><img src="img/red.png"/></div>
				<p class="left1">收货<span>1</span>天后评论</p>
				<p class="left2">2016-06-25 21:30</p>
				<p class="left3">流光金</p>
				
			</div>
			<div class="center">
				<p  class="center1">产品很漂亮，很喜欢，和想象的一样</p>
				<p  class="center2">
				<a href="#">点赞（0）</a>
				<a href="#">回复（0）</a>
				</p>
			</div>
			<div class="right">
				<img src="img/gold.jpg"/><span class="name">h**1</span>
				<p  class="right1"><span class="right1span1">金牌会员</span><span class="right1span2">北京</span></p>
				<p  class="right2"><a href="#">来自京东Android客户端</a></p>
			</div>
	</div>
</div>
	<div class="list">
	<a class="list1" href="javascript:;">上一页</a>
	<a class="list2" href="javascript:;">下一页</a>
	</div>

	
	
	<script src='js/jquery.js'></script>
	<script>


		$(function(){
			var n;
			$(".div2 img").mouseover(function(){
			//console.log($(".outer")[0].offsetLeft)
				n=$(this).index();
				 $(".bgimg")[0].innerHTML='<img src='+"img/show"+(n+1)+'.jpg>';
	          $(".bigimg")[0].innerHTML='<img src='+"img/show0"+(n+1)+'.jpg>';	
			})

			rata=$(".bigimg").width()/$(".smallimg").width()//大图与小图的比例
			$(".outer").mouseover(function(){		//鼠标划过outer时

				$('.smallimg').addClass('show').removeClass('hide')
				$('.bigimg').addClass('show').removeClass('hide')


				$('.outer').mousemove(function(e){	//鼠标在outer中移动时
					var e=e||event;
					var x=e.clientX-$(".smallimg").width()/2;
					var y=e.clientY-$(".smallimg").height()/2;
					
					var xmax=$(".outer").width()-$(".smallimg").width()
					var ymax=$(".outer").height()-$(".smallimg").height()
					

					if(x<0){
						x=0
					}
					if(x>xmax){
						x=xmax
					}
					if(y<0){
						y=0
					}
					if(y>ymax){
						y=ymax
					}
					
					$(".smallimg").css("left",x)
					$(".smallimg").css("top",y)

					$(".bigimg").scrollLeft(x*rata)
					$(".bigimg").scrollTop(y*rata)
				})

			})

			$(".outer").mouseout(function(){
				$('.smallimg').addClass('hide').removeClass('show')
				$('.bigimg').addClass('hide').removeClass('show')
			})
			$('#comments').mouseover(function(){
			$('.center2').css('display','block')
			})
			$('#comments').mouseout(function(){
			$('.center2').css('display','none')
			})
				
				
	var box=$("#box"),comments=$("#comments"),leftImg=$(".leftImg");
	var center=$(".center"),right=$(".right");
	var num=0;
	$('.list1').click(function(){
			if(num>0){
			num--;
			}else{
			num==0;
			}
			move();
			})
		$('.list2').click(function(){
			num++;
			move();
			})
		function move(){
	$.ajax({
		type:"get",
		url:"http://sclub.jd.com/productpage/p-1643513-s-3-t-3-p-"+num+".html",
		jsonp:'callback',
		dataType:"jsonp",
		success:function(data){
		
			var arr=data.comments;
			for(var i=0;i<10;i++){
				$(".left1 span").eq(i).text(arr[i].days);
				$(".left2").eq(i).text(arr[i].creationTime);
				$(".left3").eq(i).text(arr[i].productColor);
				$(".left4").eq(i).text(arr[i].productColor);
				$(".center1").eq(i).text(arr[i].content);
				$(".center2").eq(i).text("回复("+arr[i].replyCount+")");
				$(".right .name").eq(i).text(arr[i].nickname);
				$(".right .right1span1").eq(i).text(arr[i].userLevelName);
				$(".right .right1span2").eq(i).text(arr[i].userProvince);
				$(".right2").eq(i).html(arr[i].userClientShow);
			}
		},
	});	
		};	

		})
	</script>
</body>
</html>